<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Page</title>
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/1.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/2.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/3.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/4.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/5.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/6.css" />
<link type="text/css" rel="stylesheet" href="/bob-web/CSS/7.css" />
<link rel="stylesheet" type="text/css" href="/bob-web/CSS/3c-lcrc-static-pp-layout.css" />
<link rel="stylesheet" type="text/css" href="/bob-web/CSS/3c-lcrc-static-pp-presentation.css" />
<link rel="stylesheet" type="text/css" href="/bob-web/CSS/2FEu-VTjHxG.css" />

<script src="/bob-web/CSS/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="/bob-web/CSS/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/bob-web/CSS/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox() 
    })
</script>



</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function like(likerUserId, actionId, index){

   $.ajax({
       type: "GET",
       url: "/bob-web/service/ajax/like.htm",
       data: "likerUserId=" + likerUserId + "&actionId=" + actionId,
       success: function(msg){
           location.reload(true);
           //document.getElementById('unlikingDiv' + index).innerHTML = '<a href="javascript:unlike('+likerUserId+', '+actionId+'}, '+index+')">Give up liking this</a>';
       }
     });
  
}

function unlike(likerUserId, actionId, index){

   $.ajax({
       type: "GET",
       url: "/bob-web/service/ajax/like.htm",
       data: "likerUserId=" + likerUserId + "&actionId=" + actionId + "&unlike=1",
       success: function(msg){
           location.reload(true);
           //document.getElementById('likingDiv' + index).innerHTML = '<a href="javascript:like('+likerUserId+', '+actionId+'}, '+index+')">Like</a>';
       }
     });

}

function comment(commenterUserId, actionId, index){
   var comment = document.getElementById('comment' + index).value;
   $.ajax({
       type: "GET",
       url: "/bob-web/service/ajax/comment.htm",
       data: "commenterUserId=" + commenterUserId + "&actionId=" + actionId + "&comment=" + comment,
       success: function(msg){
           location.reload(true);
       }
     });

}
</script>
<script>
function setFeed(){
    document.getElementById('feed').value = document.getElementById('feedText').innerHTML;
}
</script>
<body class="profile">
<!-- left column -->
<div id="lh-col"><br />
  <%@ include file="/WEB-INF/jsp/leftScreen.jsp" %>
</div>
<!-- end of left column -->
<!-- center column -->
    <!-- Tabs -->
     <%@ include file="/WEB-INF/jsp/tabs.jsp" %>
     <!-- End of tabs -->


 <form action="/bob-web/service/profilePage.htm?wantedUserId=${model.wantedUserId}" method="POST"  onSubmit="return setFeed()">
 		<div class="UIComposer clearfix UIComposer_STATE_PIC_NONE UIComposer_STATE_INPUT_FOCUSED" id="c4cd6e42e87b4a4653003519">
      <div class="pas UIComposer_Box UIContentBox uiBoxGray">
        <div>
          <div class="UIComposer_Content">
            <div class="UIComposer_InputArea_Base UIComposer_InputArea">
              <div class="UIComposer_InputShadow">
                <div id="feedText"  class="Mentions_Input" contenteditable="true"  style="text-align:left">

                </div>
                  <input id="wantedUserId" name="wantedUserId" value="${model.wantedUserId}" type="hidden">
                  <input id="feed" name="feed" type="hidden">
              </div>
            </div>
            <div id="composer_buttons">
              <div class="UIComposer_ButtonArea" id="c4cd6e42e87b4a4653003519_buttons">
                <ul class="UIComposer_Buttons">
                  <li class="UIComposer_FormButtons">
                    <label class="UIComposer_SubmitButton uiButton uiButtonConfirm uiButtonLarge">
                    <input value="Post" type="submit">
                    </label>
                  </li>
                  <li class="UIComposer_PrivacyEtc"></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


 <h2> Home Feed</h2>
 

      <table width="90%" border="0" cellpadding="5">
        <c:forEach items="${model.user.actionList}" var="action" varStatus="loop">
           <tr>
                <td rowspan="2" style="vertical-align:top"><c:if test="${action.actionerUser.image == null}"><img class="img" width="20" height="20" src="/bob-web/user_images/no_photo.jpg"></c:if>
                  <c:if test="${action.actionerUser.image != null}"><img class="img" width="20" height="20" src="/bob-web/user_images/${action.actionerUser.image}"></c:if></td>
                <td><a href="/bob-web/service/myWall.htm?wantedUserId=${action.actionerUser.userId}"> ${action.actionerUser.name} ${action.actionerUser.surname}</a> <br>${action.entry}</td>
             
              </tr>
              <tr>
                <td><font color="#999" size="-2"> ${action.actionTime}  
				
               
                        <c:if test="${action.loggedInUserLiked}">
                        <a href="javascript:unlike(${model.loggedInUser.userId}, ${action.actionId}, ${loop.index})"> - Give up liking this - </a>
                        </c:if>
                        <c:if test="${!action.loggedInUserLiked}">
                           <a href="javascript:like(${model.loggedInUser.userId}, ${action.actionId}, ${loop.index})"> - Like - </a>
                        </c:if>

					        <a href="/bob-web/service/ajax/likes.htm?actionId=${action.actionId}" rel="facebox"> ${action.likesCount} times liked -</a>


                </font>
                <br>
                <font color="#999" size="-2">
                 <textarea rows="2" cols="120" id="comment${loop.index}" name="comment${loop.index}"></textarea>
                    <br>
                    <a href="javascript:comment(${model.loggedInUser.userId}, ${action.actionId}, ${loop.index})"><b>Comment</b></a>
               
                        <a href="/bob-web/service/ajax/comments.htm?actionId=${action.actionId}" rel="facebox">  - ${action.commentsCount} times commented - </a>
				   <table  bgcolor="#EDEFF4">
        <c:forEach items="${action.comments}" var="comment">
            <tr>
                <td>
				<a href="/bob-web/service/myWall.htm?wantedUserId=${comment.commenterUser.userId}"> ${comment.commenterUser.name} ${comment.commenterUser.surname}</a>
				
				 - ${comment.comment} - <br> <font color="#999" size="-2">${comment.commentTime}</font>
				 <hr color="#E5EAF1">
				 </td>
            </tr>
        </c:forEach>
    </table>
				   
				   
                </font>
				     <hr>
				</td>
              </tr>

        </c:forEach>
      </table>

    <input type="hidden" name="wantedUserId" value="${model.user.userId}"/>
  </form>

  </div>

 
</div>
<!-- end of center column -->
<!-- right column -->
<div id="rh-col"> <a href="/bob-web/service/homePage.htm"><img border="0" src="/bob-web/Images/logo.png" alt="BookOfBoun" width="180" height="100" /></a>
  <%@ include file="/WEB-INF/jsp/rightScreen.jsp" %>
</div>
<!-- end of right column -->
</body>
</html>
